<script setup lang="ts">
import { resolve } from 'dns';
import { ref, onMounted } from 'vue';
const canvasRef = ref();

let ctx: any;
const images: any[] = [];
onMounted(()=>{
  ctx = canvasRef.value.getContext('2d');
  for (let i=1; i<=34; i++) {
    const img = new Image();
    // img.src = '/src/assets/im'
    img.src = `/src/assets/img/gameImg/dashe_${i<10?'0'+i:i}.png`;
    images.push(img);
  }
  console.log(img);
  
});

// 睡眠
const sleep = (ms: number) => {
  // 把异步变为同步用到Promise
  return new Promise(resolve=>{
    setTimeout(resolve, ms);
  });
};

const startGame = async () => {
  for (let i=0; i<34; i++) {
    ctx.clearRect(0, 0, 600, 600);
    ctx.drawImage(images[i], 20, 20, 200, 200);
    await sleep(50);
  }
}

</script>

<template>
  <canvas width="600" height="600" class="canvas" ref="canvasRef"></canvas>
  <button @click="startGame()">开始游戏</button>
</template>

<style scoped>
.canvas {
  width: 600px;
  height: 600px;
  border: 1px solid #d3d3d3;
  margin: 20px;
}
</style>